<template>
    <div class="all">
        <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div>
        <el-page-header @back="goBack" :content="$route.name"></el-page-header>
        <div class="search">
            <!-- <el-form ref="form" :model="carSearch" :inline="true" label-width="85px" size="mini">
                <el-form-item label="用户名：">
                    <el-input v-model="carSearch.userName" clearable placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input v-model="carSearch.userPhone" clearable placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="车牌：">
                    <el-input v-model="carSearch.plateNumber" clearable placeholder="请输入车牌"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchClick">查 询</el-button>
                </el-form-item>
            </el-form>-->
        </div>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="carTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <el-table-column label="用户名" width="160px">
                    <!-- <template slot-scope="scope">
                        <span>{{ scope.row.userName }}</span>
                    </template> -->
                    <span>{{routerrow.user_name}}</span>
                </el-table-column>
                <el-table-column label="姓名" width="160px">
                    <!-- <template slot-scope="scope">
                        <span>{{ scope.row.name }}</span>
                    </template> -->
                    <span>{{routerrow.name}}</span>
                </el-table-column>
                <el-table-column label="手机号" width="160px">
                    <!-- <template slot-scope="scope">
                        <span>{{ scope.row.userPhone }}</span>
                    </template> -->
                    <span>{{routerrow.phone}}</span>
                </el-table-column>
                <el-table-column label="车辆类型" width="160px">
                    <template slot-scope="scope">
                        <span>{{ cartype[scope.row.type] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="车牌" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.plate_number }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="车架号" width="180px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.chassis_number }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="地区" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.area }}</span>
                    </template>
                </el-table-column>-->
                <el-table-column label="添加时间" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time*1000 | formatDate }} {{ scope.row.create_time*1000 | formatDateBehind }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车剩余总次数" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.wash_remain_num }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="会员消费总次数" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.consume_num }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="消费总金额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.consumption }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="充值总金额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.recharge }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="会员" width="100px">
                    <template slot-scope="scope">
                        <span
                            style="display:block;cursor:pointer;"
                            @click="lookMember(scope.$index, scope.row)"
                        >查看</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="备注" width="200px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.note }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120px">
                    <template slot-scope="scope">
                        <el-button
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            <!-- 修改/查看对话框 -->
            <el-dialog
                title="修改/查看"
                width="60%"
                :visible.sync="editVisible"
                center
                @close="closeBrowse"
            >
                <el-form :model="editPrice" >
                    <el-form-item label="车牌：" :label-width="formLabelWidth">
                        <el-input v-model="editPrice.plate_number" placeholder="请输入车牌"></el-input>
                    </el-form-item>
                    <el-form-item label="车架号：" :label-width="formLabelWidth">
                        <el-input v-model="editPrice.chassis_number" placeholder="请输入车架号"></el-input>
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="formLabelWidth">
                        <el-input
                            type="textarea"
                            autosize
                            v-model="editPrice.note"
                            placeholder="请输入备注"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelModify">取 消</el-button>
                    <el-button type="primary" @click="confirmModify">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import "../../../../static/scss/page.scss";
import utils from "../../../util/request";
import {formatDate } from '../../../util/time.js';
export default {
    data() {
        return {
            // 分页
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            editVisible: false, //修改/查看对话框
            formLabelWidth: "120px", //对话框的标签宽度
            routerrow: null,
            cartype:["通用","轿车","SUV","MPV"],
            editPrice: {
                // 修改对话框
                id: "", //车辆id
                plate_number: "", //车牌
                chassis_number: "", //车架号
                note: "" //备注
            },
            // carSearch: {
            //     //搜索
            //     userName: "", //用户名
            //     userPhone: "", //手机号
            //     plateNumber: "" //车牌
            // },
            carTable: [
                {
                    userName: "123", //用户名
                    realName: "张三", //姓名
                    carType: "小轿车", //车辆类型
                    carNumber: "粤B7CU91", //车牌
                    userPhone: "15079542913", //手机号
                    vin: "lfv2a2150a3043256", //车架号
                    area: "深圳市", //地区
                    addTime: "2020-08-13", //添加时间
                    carWashCount: 3, //洗车剩余总次数
                    consumeAllCount: 1, //会员消费总次数
                    consumeAllMoney: 15, //消费总金额
                    topupAllMoney: 45, //充值总金额
                    remark: "" //备注
                },
                {
                    userName: "123", //用户名
                    realName: "张三", //姓名
                    carType: "小轿车", //车辆类型
                    carNumber: "粤B7CU91", //车牌
                    userPhone: "15079542913", //手机号
                    vin: "lfv2a2150a3043256", //车架号
                    area: "深圳市", //地区
                    addTime: "2020-08-13", //添加时间
                    carWashCount: 2, //洗车剩余总次数
                    consumeAllCount: 2, //会员消费总次数
                    consumeAllMoney: 30, //消费总金额
                    topupAllMoney: 30, //充值总金额
                    remark: "" //备注
                },
                {
                    userName: "123", //用户名
                    realName: "张三", //姓名
                    carType: "小轿车", //车辆类型
                    carNumber: "粤B7CU91", //车牌
                    userPhone: "15079542913", //手机号
                    vin: "lfv2a2150a3043256", //车架号
                    area: "深圳市", //地区
                    addTime: "2020-08-13", //添加时间
                    carWashCount: 1, //洗车剩余总次数
                    consumeAllCount: 3, //会员消费总次数
                    consumeAllMoney: 45, //消费总金额
                    topupAllMoney: 15, //充值总金额
                    remark: "" //备注
                }
            ]
        };
    },
    filters:{
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        // searchClick() {
        //     // 查询
        // },
        goBack: function() {
            // 页头的返回
            this.$router.go(-1);
        },
        lookMember(index, row) {
            // 查看会员
            console.log(index, row);
            this.$router.push({ path: "/carMember", query: { row: JSON.stringify(row) } });
        },
        edit(index, row) {
            // 修改
            // console.log(row);
            this.editVisible = true;
            for(var i in this.editPrice) this.editPrice[i] = row[i];
            this.editPrice.index = index;
            // console.log(this.editPrice)
            // this.editPrice.storeId = row.storeId; //车辆id
            // this.editPrice.carNumber = row.carNumber; //车牌
            // this.editPrice.vin = row.vin; //车架号
            // this.editPrice.remark = row.remark; //备注
        },
        confirmModify() {
            // 确认对话框:需要手机验证
            let data = {}
            // console.log(this.editPrice)
            for(var i in this.editPrice) (this.editPrice[i] !== "" && this.editPrice[i] !== null) && i !== "index" ? data[i] = this.editPrice[i] : "";
            console.log(data)
            utils.request("/car/update","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    let key = this.editPrice.index;
                    for(var o in data) data[o] !== "" ? this.carTable[key][o] = data[o] : "";
                    this.editVisible = false
                    this.$message({
                        message: "修改成功！",
                        type: "success"
                    })
                }else{return}
            })
            
        },
        cancelModify() {
            // 取消对话框
            this.editVisible = false;
            for(var i in this.editPrice) this.editPrice[i] = "";
            // this.editPrice.carNumber = "";
            // this.editPrice.vin = "";
            // this.editPrice.remark = "";
        },
        closeBrowse() {
            // 关闭对话框
            for(var i in this.editPrice) this.editPrice[i] = "";
            // this.editPrice.carNumber = "";
            // this.editPrice.vin = "";
            // this.editPrice.remark = "";
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
        }
    },
    created() {
        this.routerrow = JSON.parse(this.$route.query.row);
        // if (row !== "[object Object]") {
        //     console.log(row);
        // }
        utils.request("/car/list","post",JSON.stringify({page:1,list_rows:10000,user_id:this.routerrow.id})).then(resp=>{
            console.log(resp)
            this.carTable = resp.data.data.data;
            this.pageResultSize = resp.data.data.total;
        })
    }
};
</script>




